<template>
	<div>
        <el-row class="search-title">
          <el-col :span="24">查询条件</el-col>
        </el-row>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="文本">
            <el-input v-model="formInline.user" placeholder="Approved by" />
            </el-form-item>
            <el-form-item label="下拉">
            <el-select v-model="formInline.region" placeholder="Activity zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row>
          <el-col :push="23" :span="1">
            <el-button type="primary" size="small" @click="addFun">新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
            <el-table-column fixed="right" label="Operations" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="deleteFun(scope.row)">删除</el-button>
                    <el-button link type="primary" size="small" @click="editFun(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-block">
            <el-pagination
                v-model:currentPage="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
	</div>
</template>

<script setup lang='ts' name='memberList'>
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const formInline = reactive({
  user: '',
  region: ''
})
const tableData = [
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
const currentPage = ref(4)
const pageSize = ref(100)
const disabled = ref(false)
const background = ref(false)

// 改变每页条数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
// 改变当前页码
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
// 查询
const onSubmit = () => {
  console.log('submit!', formInline.user)
}
// 新增
const addFun = () => {
  router.push('/member_list_add')
}
// 删除
const deleteFun = (row) => {
  console.log('row删除', row)
  ElMessage({ message: '删除成功！', type: 'success' })
}
// 编辑
const editFun = (row) => {
  console.log('row编辑', row)
  router.push({ path: '/member_list_add', query: { id: row.id }})
}
</script>

<style scoped>
.search-title {
    margin-bottom: 6px;
    color: #999;
    font-size: 12px;
}
.pagination-block {
    float: right;
    margin: 5px 0;
}
</style>